<template>
  <div>
    <div v-if="hasDetail">
      <breadcrumb v-if="detail.data.name" :navdata="bdname"></breadcrumb>
      <div class="courseHead">
        <div class="headContent">
          <div class="contentImng">
            <img :src="detail.data.url" />
          </div>
          <div class="contentFont">
            <div class="fontTitle" v-text="detail.data.name"></div>
            <div class="descwrapper">
              <div ref="fontDescri" class="fontDescri" v-text="detail.data.brief"></div>
            </div>
            <div class="fontRest">
              <div class="restItem fontFree">
                <div class="pricewrapper"  v-if="detail.data.price*1 == 0">
                  <span class="isfree">免费试听</span>
                </div>
                <!-- <div class="pricewrapper"  v-if="detail.data.price*1 == 0 || !detail.data.price">
                  <span class="isfree">免费试听</span>
                </div> -->
                <!-- <div class="pricewrapper"  v-if="detail.data.price != 0 && detail.data.price != null">
                  <span class="courseprice">￥{{detail.data.price}}</span>
                </div> -->
                <!-- <div class="pricewrapper"  v-if="detail.price == '0.01'">
                  <span class="courseprice">￥{{detail.price}}</span>
                </div> -->
              </div>
              <div class="restItem fontBtn">
                <a @click.once="countConsult" id="coursezx" onclick="_hmt.push(['_trackEvent', 'courseconsult', 'click', 'coursezx'])" class="advisory" :href="`http://wpa.qq.com/msgrd?v=3&uin=${QQNum}&site=qq&menu=yes`" target="_blank">课程咨询</a>
                <button @click="goPayPage" id="wysignup" onclick="_hmt.push(['_trackEvent', 'wysign', 'click', 'wysignup'])" :disabled="isCanSign" :class="{apply:true, disable:isCanSign}">{{whatCanIDo}}</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detailTitle">
        <span class="icon-jingxuan">
          <span class="path1"></span><span class="path2"></span>
        </span>
        <span class="coursedetail">课程详情</span>
      </div>
      <div class="detail_nrz">
        <div class="detail_nr" ref="totalHeight" :style="'background:'+detail.data.backColor">
          <div class="zuo"><img src="../../images/zuo.png"/></div>
          <div v-html="detail.data.detail" class="detailContent" show-close="0" ref='contentHeight'>
          </div> 
          <div class="you"><img src="../../images/you.png"/></div>
        </div>
      </div>
      <div class="modifyele">
      <el-dialog title="您报名的套餐开课地点为：" :show-close='false'  :visible.sync="applyDialog" class="apply-dialog">
        <div><el-radio v-model="couserCityId" v-for="(item, index) in CurrentCityList" :key="index+'city'" :label="item.id" @change="toggle(item.id,item.couserId)">{{item.cityName}}</el-radio></div>
        <div class="apply-select">
          请选择离您最近的开课地点：
          <el-select v-model="campus" placeholder="请选择校区" class="select_w">
            <el-option v-for="(citem,key) in campuses" :key="'campus'+key" :label="citem.campusName" :value="citem.id.toString()"></el-option>
          </el-select>
        </div>
        <div class="promptRadio">如开课地点不符合，请点击上方城市进行修改</div>
        <div class="apply-btn-wrapper">
          <el-button class="apply-cencle" @click="hiedApply">关闭</el-button>
          <el-button class="apply-confirm" id="signaddress" onclick="_hmt.push(['_trackEvent', 'sign', 'click', 'signaddress'])" @click='applyConfirm'>确认报名</el-button>
        </div>
      </el-dialog>
      </div>
    </div>
    <div v-if="!hasDetail" class="noResult">
      <img src="../../images/xiajiazhuangtai.png" width="108px" height="142px"/>
      <p>该套餐已下架</p>
    </div>
  </div>
</template>

<script>
import breadcrumb from "basic/breadcrumb/breadcrumb"
import { mapGetters, mapActions } from 'vuex'
import * as opreate from 'api/getData'
import Clamp from "plus/clamp"
import Vue from 'vue'
 Vue.component('custComp',{
  template: `<div class="cityRadio">
  <el-radio v-model="cid" v-for="(item,index) in cityList" :key="item.id+'city'" :label="item.id" @change="toggle(item.id,item.cityName)">{{item.cityName}}</el-radio>
  
  <div class="promptRadio">如开课地点不符合，请点击上方城市进行修改</div>
  </div>`,
  metaInfo: {
    title: '课程详情-国科学院', // set a title
    meta: [{                 // set meta
      name: 'keywords',
      content: '课程详情-国科学院,在线教育,IT人才培养,IT培训,软件开发培训,编程培训,软件工程师培训班,成都IT培训机构,程序员培训机构'
    }],
  },
  data(){
    return {
      radio: 1,
      cid:'',
      campuses:[],
      campus: ''
    }
  },
  props:['cityList','curcityId'],
  mounted(){
    this.cityList.forEach(item=>{
      if(item.id == this.curcityId){
        this.campuses = item.campuses
      }
    })
    this.cid = this.curcityId
  },
  methods: {
    toggle(id,name){
      this.cityList.forEach(item=>{
        if(item.id == id){
          this.campuses = item.campuses
        }
      })
      let city = {
        'id': id,
        'name': name
      }
      localStorage.setItem('newCity',JSON.stringify(city))
    }
  }
})
let custComp = Vue.component('custComp')
export default {
  name: "course-detail",
  components: {
    breadcrumb
  },
  data() {
    return {
      hasDetail: true,
      couserCityId:'',
      campus: '',
      campuses:[],
      bdname: [{
        name: '首页',
        url: '/'
      }, {
        name: '全部套餐',
        url: '/allCourse'
      }
      // 使面包屑第三个导航不能用
      // , {
      //   name: '',
      //   url: ''
      // }
      ],
      detail: {
        data: {}
      },
      whatCanIDo: '我要报名',
      isCanSign: false,
      key:1,
      applyDialog: false,
      CurrentCityList:[],
      couserId:''
    }
  },
  async mounted() {
    await this.setCurrentCityList()
    // console.log(this.CurrentCityList)
    this.checkSignStatus()
    this.getDetail()
    Clamp(this.$refs.fontDescri, { clamp: 4 })
  },
  computed: {
    ...mapGetters(['isLogin', 'cityId', 'currentUser', 'cityName', 'QQNum','cityList'])
  },
  methods: {
    ...mapActions([
      'setDialogClose',
      'setCity'
    ]),
    hiedApply(){
      this.applyDialog = false
    },
    applyConfirm(){
      // console.log(this.couserId)
          opreate.courseDetail(this.$route.query.detailId).then(res => {
            if(res===null)
            {
              this.$alert('该套餐已下架，我们会努力上线新套餐！', '提示', {
              confirmButtonText: '确定',
              showClose: true,
              callback: action => {
                if(action == 'confirm')
                {
                  this.hasDetail=false
                }
              }
            })
            }else
            {
              this.$router.push({ path: '/payPage', query: { courseId: this.couserId, campus: this.campus} })
            }
          })
      // this.$router.push({ path: '/payPage', query: { courseId: this.couserId, campus: this.campus} })
    },
    toggle(id,couserId){
      this.couserId = couserId
      this.cityList.forEach(item=>{
        if(item.id == id){
          this.campuses = item.campuses
        }
      })
      this.campuses.forEach(item=>{
        this.campus=item.id.toString()
      })
      // console.log(this.campus)
    },
    setCurrentCityList(){
      this.cityList.forEach((item, key, arr) => {
        opreate.getCourseIdByCity(this.$route.query.detailId,item.id).then(res=>{
          if(res.id){
            item.couserId = res.id
            this.CurrentCityList.push(item)
          }
        })
      })
    },
    checkSignStatus() {
      if (this.isLogin) {
        opreate.checkSign(this.currentUser.type, this.currentUser.cluesOrStuId, this.$route.query.detailId).then(res => {
          if (res.data.canBuy == '1') {
            this.whatCanIDo = '已报名';
            this.isCanSign = true;
          }
        })
      }
    },
    countConsult(){
      let userId = this.currentUser && this.currentUser.cluesOrStuId || '',
        account = this.currentUser && this.currentUser.account || '',
        cityId = this.cityId && this.cityId || '',
        cityName = this.cityName && this.cityName || ''

      opreate.statisticsSave(cityId, cityName, userId, account)
    },
    getDetail() {
     
        opreate.courseDetail(this.$route.query.detailId).
        then(res => {
        console.log(res)
        if(res==null){
          this.hasDetail = false
          return
        }else{
        this.hasDetail = true
        var cityid=this.cityId;
        var cid=res.city.id
        this.$set(this.detail,'data', res)
        if(cityid==cid){
          this.detail.data.shows=1;
        }
        
        let categoryName = {
          directionId: res.direction,
          typeId: res.type,
          name: res.name
        }
        this.couserCityId = res.city.id
        this.couserId = this.$route.query.detailId
        this.cityList.forEach(item=>{
        if(item.id == res.city.id){
            this.campuses = item.campuses
            this.campus = item.campuses[0].id.toString()
          }
        })

        return categoryName
        }
        })
        .then(data => {
          if(data==null){
            console.log('无面包屑')
            return
          }
          let query = this.$route.query;
          if (query.from == '1' || query.from == '2') {
            this.bdname = [{
              name: '首页',
              url: '/'
            }, {
              name: '全部套餐',
              url: '/allCourse'
            }, {
              name: query.direc,
              url: '/directionCourse?direction=' + data.directionId + '&type=&cityId=' + this.cityId
            }, {
              name: query.type,
              url: '/categoryCourse?direction=' + data.directionId + '&type=' + data.typeId + '&cityId=' + this.cityId
            }, {
              name: data.name,
              url: ''
            }]
          } else if (query.from == '3') {
            this.bdname = [{
              name: '首页',
              url: '/'
            }, {
              name: '全部套餐',
              url: '/allCourse'
            }, {
              name: query.direc,
              url: '/directionCourse?direction=' + data.directionId + '&type=&cityId=' + this.cityId
            }, {
              name: data.name,
              url: ''
            }]
          } else if (query.from == '4') {
            this.bdname = [{
              name: '首页',
              url: '/'
            }, {
              name: '全部套餐',
              url: '/allCourse'
            }, {
              name: query.direc,
              url: '/directionCourse?direction=' + data.directionId + '&type=&cityId=' + this.cityId
            }, {
              name: query.type,
              url: '/categoryCourse?direction=' + data.directionId + '&type=' + data.typeId + '&cityId=' + this.cityId
            }, {
              name: data.name,
              url: ''
            }]
          }
        })

     
    },
    goPayPage() {
      if (this.isLogin) {
        opreate.checkSign(this.currentUser.type, this.currentUser.cluesOrStuId, this.$route.query.detailId).then(res => {
          if (res.data.canBuy == '1') {
            this.$alert('您已报名过该课程，无需再次报名！', '提示', {
              confirmButtonText: '确定',
              showClose: true,
              callback: action => {
                if (action == 'confirm') {
                  this.whatCanIDo = '已报名';
                  this.isCanSign = true;
                }
              }
            });
          } else {
            // const h = this.$createElement;
            // this.$msgbox({
            //   title: '您报名的套餐开课地点为：',
            //   customClass:"selectAdd",
            //   message: h(custComp,{props: {
            //       cityList: this.cityList,
            //       curcityId:this.detail.data.city.id || this.CurrentCityList.id
            //     },key:this.key++,scopedSlots:'myRef'}),
            //   showCancelButton: true,
            //   confirmButtonText: '确认报名',
            //   cancelButtonText: '关闭',
            //   beforeClose: (action, instance, done) => {
            //     if (action === 'confirm') {
            //       let newCity = localStorage.getItem('newCity')
            //       if(newCity){
            //         this.setCity(JSON.parse(newCity))
            //       }
            //       done();
            //     } else {
            //       localStorage.removeItem('city')
            //       done();
            //     }
            //   }
            // }).then(action => {
            //   this.$router.push({ path: '/payPage', query: { courseId: this.$route.query.detailId } })
            // }).catch(action => {
            // })
            this.applyDialog = true
          }
        })
      } else {
        this.$alert('登录后才可以报名课程哦!', '提示', {
          confirmButtonText: '立即登录',
          showClose: true,
          callback: action => {
            if (action == 'confirm') {
              setTimeout(() => {
                this.setDialogClose(true)
              }, 400);
            }
          }
        });
      }
    }
  },
  watch:{
    cityId(){
      opreate.getCourseIdByCity(this.$route.query.detailId,this.cityId).then(res=>{
          if(res.id){
            // this.hasDetail = true
            this.$router.push({
              path: this.$route.path,
              query: {
                detailId: res.id,
                from: this.$route.query.from,
                direc: this.$route.query.direc
              }
            })
          }else{
            this.hasDetail = false
            console.log('无对应套餐')
          }
        })
      
      // console.log(this.$route)
    }
    // hasDetail(){
    //   console.log("hasDetail:",this.hasDetail)
    // }
  }
}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
@import '~style/modifyselect.styl';
.btnspec {
  width: 144px;
  height: 44px;
  border-radius: 2px;
  background: #fff;
  line-height: 44px;
  text-align: center;
  display: inline-block;
}

.courseHead {
  width: 100%;
  height: 294px;
  margin-top: 30px;
  @extend .borderBox;

  .headContent {
    @extend .sWidth, .borderBox;
    height: 294px;
    background: $color-text;
    position: relative;

    .contentImng {
      display: inline-block;
      vertical-align: top;
      font-size: 0px;
      position: absolute;
      z-index: 15;

      img {
        width: 408px;
        height: 264px;
      }
    }

    .contentFont {
      position: absolute;
      left: 30px;
      top: 30px;
      bottom: 0px;
      right: 0px;
      vertical-align: top;
      padding: 30px 60px 0px 408px;
      background: $color-person-bg;

      .fontTitle {
        font-weight: bold;
        font-size: $font-size-large-l;
        line-height: $font-size-large-l;
        color: $color-course-title;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .descwrapper {
        margin-top: 14px;
        height: ($font-size-large * 5);
        width: 100%;
        .fontDescri {
          color: $color-text-l;
          font-size: $font-size-medium;
          line-height: ($font-size-large * 1.5);
          ellipsis(4);
        }
      }

      .fontRest {
        width: 100%;
        display: table;
        table-layout: fixed;
        height: 109px;

        .restItem {
          padding-top: 35px;
          display: table-cell;
        }

        .fontFree {
          // cursor: pointer;
          width: 40%;

          .pricewrapper {
            span {
              font-size: $font-size-medium-x;
              color: $color-theme-btn;
              vertical-align: middle;
              font-size: $font-size-large-xxxxl;
            }

            .isfree {
              padding-left: 5px;
              font-size: $font-size-large-xxl;
            }

            .courseprice {
              font-size: $font-size-large-xxxxl;
            }
          }
        }

        .fontBtn {
          width: 60%;
          text-align: right;
          margin-top: 30px;

          .advisory {
            @extend .btnspec;
            margin-right: 25px;
            border: none;
            background: $color-theme;
            text-decoration: none;
            color: $color-text;

            &:hover {
              background: $color-background-more;
              color: $color-text;
            }
          }

          .apply {
            @extend .btnspec;
            border: 1px solid $color-theme-btn;
            color: $color-theme-btn;
            cursor: pointer;
            background: $color-background-det;

            &:hover {
              background: $color-theme;
              color: $color-text;
            }

            &.disable {
              border: 1px solid #e5e5e5;
              color: #767676;
              background: #e5e5e5;
            }
          }
        }
      }
    }
  }
}

.detailTitle {
  @extend .sWidth, .borderBox;
  margin: 50px auto;

  .icon-jingxuan {
    font-size: $font-size-medium-x;
  }

  .coursedetail {
    font-weight: bold;
    font-size: $font-size-large-xxl;
    color: $color-course-title;
    text-align: justify;
    margin-left: 6px;
  }
}
.detail_nrz
{
  margin-bottom:120px
}
.detail_nr
{
  max-width:1200px;
  display:flex;
  margin: 0 auto;
}
.detailContent {
  // @extend .sWidth, .borderBox;
  @extend .borderBox;
  // background: $color-text;
  // margin-bottom: 48px;
  flex:1;
  max-width:750px;
  margin-bottom:-2.6px
  // display:flex
}
.detailContent /deep/ img {
  width:100%
}
.detail_nr .zuo,.you
{
  
}
.detail_nr .zuo,.you img
{
  width:225px;
  height:623px
}
.apply-cencle{
  border: 1px solid #FF6252;
  margin-right: 20px;
  // border: none;
  background: #ffefed;
  text-decoration: none;
  color: #ff6252;
  width: 116px;
  height: 32px;
  border-radius: 2px;
  line-height: 32px;
  text-align: center;
  &:hover{
    background: #ff6252;
    color: #fff;
    border-color:#ff6252
  }
  @media (min-width: 1920px){
    width: 142px !important;
    height: 42px !important;
    font-size:18px !important;
    }
}
.apply-confirm{
  border: 1px solid #ff6252;
  color: #fff;
  cursor: pointer;
  background: #ff6252;
  width: 116px;
  height: 32px;
  border-radius: 2px;
  line-height: 32px;
  text-align: center;
  &:hover{
    background: #f73c28;
    border: 1px solid #f73c28;
  }
  @media (min-width: 1920px){
    width: 142px !important;
    height: 42px !important;
    font-size:18px !important;
    }
}
.select_w
{
  width:198px;
  height:32px;
  line-height:32px
}
.noResult
    text-align center
    margin-top 56px
    p
      color $color-person-text
      margin-top 40px
      font-size $font-size-medium-x
    @extend .sWidth
    i
      font-size 181px
    @media (min-width: 1920px)
      margin-top 56px


// elementUI样式重写
.modifyele /deep/ .apply-dialog .apply-btn-wrapper{
    text-align: right;
    margin-right: 0px;
    margin-top: 20px  
}
.modifyele /deep/ .apply-dialog .apply-select
{
    color: #a4a4a4
}
.modifyele /deep/ .apply-dialog .promptRadio[data-v-084757e0]
{
    margin-top: 18px;
}  
.modifyele /deep/ .apply-dialog .el-dialog
{
    width: 438px;
    height: 272px;
    border-radius: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -136px !important;
    margin-left: -219px;
}
      
.modifyele /deep/ .el-select .el-input .el-select__caret
{     
      -webkit-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
      border-color: #767676 #f2f2f2 #f2f2f2 #f2f2f2;
      border-style:solid;
      border-width: 6px 4px 0 4px;
      height: 0;
      width: 0;
      margin-top: 13px;
      margin-right: 5px;
}
      
.modifyele /deep/ .el-radio__input.is-checked .el-radio__inner
{
  border-color: #FF6252;
  background: #FF6252;
}
.modifyele /deep/ .el-radio__input.is-checked+.el-radio__label
{
  color: #FF6252
}
.modifyele /deep/ .el-radio__inner:hover 
{
  border-color: #FF6252
}
.modifyele /deep/ .apply-confirm[data-v-5c464256]:hover
{
  color:#fff
}
.modifyele /deep/ .el-button:active
{
  color: #fff;
  border-color: #f73c28;
}
.modifyele /deep/ .el-button:focus, .el-button:hover {
    color: #fff;
    border-color: #f73c28;
    background-color: #f73c28;
}
  .modifyele /deep/ .el-dialog__title 
  {
    font-size 16px
    color #202020
    font-weight bold
  }
  .modifyele /deep/ .el-dialog__header 
  {
     padding 30px 30px 0
  }
     
  .modifyele /deep/ .el-dialog__body
  {
    padding 30px 30px 0
    color #202020
    font-size 13px
  } 
  
  .modifyele /deep/ .el-input--suffix .el-input__inner 
  {
      padding-right: 30px;
      width: 198px;
      height: 32px;
      line-height:32px;
      background: #f2f2f2;
  }
  .modifyele /deep/ .el-select .el-input__inner:focus, .el-select .el-input.is-focus .el-input__inner
  {
    border-color: #f2f2f2
  }
  .modifyele /deep/ .el-input__suffix
  {
    right: 0px;
  }
  .modifyele /deep/ .apply-dialog .promptRadio 
  {
      margin-top: 20px;
      color: #a4a4a4;
  }
  .el-scrollbar /deep/ .el-select-dropdown__list
  {
    padding: 0;
  }
.modifyele /deep/ .el-radio:first-child
{
  text-indent 18px
}
.modifyele /deep/ .el-popper[x-placement^=bottom] .popper__arrow
{
  display: none
}
.modifyele /deep/ .el-input .el-input--suffix
{
    width:198px;
    height:32px;
    line-height:32px
}
.modifyele /deep/ .el-select:hover .el-input__inner 
{
    background: #f2f2f2;
    border: none;
    width:198px;
    height:32px;
    line-height:32px
}
.modifyele /deep/ .el-input__inner
{
    border: none;
}
.modifyele /deep/ .el-select-dropdown__item.selected
{
  text-indent:10px
}
.modifyele /deep/ .el-select-dropdown__item.selected:hover
{
  background: #f2f2f2
}
.modifyele /deep/ .el-select-dropdown__item 
{
    text-indent: 10px;
}
.modifyele /deep/ .el-select-dropdown__item:hover
{
    text-indent: 10px;
}
  .modifyele /deep/ .el-icon-arrow-up:before 
  {
      content: "" !important;
  }
 
@media (min-width: 1920px)
{
  .modifyele /deep/ .apply-dialog .apply-btn-wrapper
  {
      margin-top 20px
  }
  .modifyele /deep/ .apply-dialog .apply-select
  {
    margin-top 30px !important
  }
  .modifyele /deep/ .apply-dialog .promptRadio[data-v-084757e0]{
  margin-top 30px !important
  }
  .modifyele /deep/ .el-dialog{
      width 560px !important
      height 326px !important
      border-radius 12px
  }
  .modifyele /deep/ .el-dialog__title
  {
    font-size 18px !important
  }
  .modifyele /deep/ .el-radio:first-child
  {
    
    text-indent 40px !important
  }
  .modifyele /deep/ .el-dialog__header
  {
     padding: 40px 40px 0;
  }
  .modifyele /deep/ .el-dialog__body
  {
    padding: 40px 40px 0;
  }
}
</style>
